<template>
	<view class="container">
		
		<view class="userinfo-box2" style="">
			<view class="">
				<image style="width: 100%;height: 400rpx;" src="../../static/img/aqiang/jifen/bg1.png" mode=""></image>
			</view>
			<view class="vip-box">
				<image style="width: 280rpx;height: 100rpx;" src="../../static/img/aqiang/jifen/vip.png" mode=""></image>
			</view>
			<view class="vip-box vip-text">
				<view class="">
					<view class=""  style="font-size: 30rpx;">当前等级：{{userinfo.level_name}}</view>
					<view v-if="userinfo.next_value" class="" style="font-size: 22rpx;">晋级下一等级需要{{userinfo.next_value}}人</view>
				</view>
				<view class="margin-right">
					<!-- <view @click="navToUrl('/pages/user/vip')" class="">会员中心 ></view> -->
					<view @click="navToUrl('/pages/help/detail?id=17')" class="">积分说明 ></view>
				</view>
			</view>
			
			<view class="user-box">
				<view class="avator">
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="avatar" mode=""></image>
					<!-- <image :src="avatar" :lazy-load="true" style="border-radius: 50%;" /> -->
				</view>
				<view class="info">
					<view class="">{{userinfo.name}}</view>
					<view class="">ID：{{userinfo.hide_phone}}</view>
				</view>
				<view class="jifen">{{ userinfo.jifen }}积分</view>
			</view>
			
			<view class="tips-box">
				<view class="">升级VIP得额外收益</view>
				<view @click="navToUrl('/pages/user/vip')" class="">查看规则 ></view>
			</view>
		</view>
		
		
		
		
		
		<!-- <view class="user-section">
			<view class="vip-card-box" style="background-image: url(/static/images/goods_bg.png); background-size: 100% 100%; display: flex; justify-content: space-between;">
			  <view class="user-info">
				<view class="text-white text-lg padding-lg">我的积分</view>
				<view class="text-white text-xxlx padding-left-lg">{{ userinfo.jifen }}</view>
			  </view>
			  <view class="user-info">
				<view class="text-white text-lg padding-lg">我的余额</view>
				<view class="text-white text-xxlx padding-left-lg">{{ userinfo.money }}</view>
			  </view>
			</view>
		</view> -->
		
		<view class="" style="">
			<uni-grid
				:column="4" 
				:showBorder="false">
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/wallet/score')" class="grid-item-box">
						<!-- <uni-icons type="image"  :size="30" color="#777" /> -->
						<view class="" style="display: flex;flex-direction: column;align-items: center;padding: 20rpx 40rpx;border-radius: 20rpx;">
							<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/jifen/jifenmingxi.png" ></image>
							<text style="margin-top: 10px;font-size: 24rpx" class="text">积分明细</text>
						</view>
						
					</view>
				</uni-grid-item>
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/games/lottery')" class="grid-item-box" >
						<!-- <uni-icons type="image"  :size="30" color="#777" /> -->
						<view class="" style="display: flex;flex-direction: column;align-items: center;padding: 20rpx 40rpx;border-radius: 20rpx;">
							<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/jifen/choujiang.png" ></image>
							<text style="margin-top: 10px;font-size: 24rpx" class="text">抽奖中心</text>
						</view>
						
					</view>
				</uni-grid-item>
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/goods/orders')" class="grid-item-box">
						<!-- <uni-icons type="image"  :size="30" color="#777" /> -->
						<view class="" style="display: flex;flex-direction: column;align-items: center;padding: 20rpx 40rpx;border-radius: 20rpx;">
							<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/jifen/qiandao.png" ></image>
							<text style="margin-top: 10px;font-size: 24rpx;" class="text">订单列表</text>
						</view>
					</view>
				</uni-grid-item>
				
				
				<uni-grid-item >
					<view @click="navToUrl('/pages/tasks/index')" class="grid-item-box" >
						<view class="" style="display: flex;flex-direction: column;align-items: center;padding: 20rpx 40rpx;border-radius: 20rpx;">
							<image style="width: 30px; height: 30px;"  mode="aspectFit" src="/static/img/aqiang/jifen/renwu.png" ></image>
							<text style="margin-top: 10px;font-size: 24rpx" class="text">任务中心</text>
						</view>
						
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<view class="" style="padding-left: 40rpx;">
			<image style="width: 100%;height: 220rpx;" src="../../static/img/aqiang/jifen/line-bg.png" mode=""></image>
		</view>
		
		<view class="">
			<uni-section title="热门兑换" type="line">
				<!-- <view class="right-more">更多</view> -->
			</uni-section>
		</view>
		
		<view v-for="(item,index) in list" @click="navToUrl('/pages/goods/detail?code='+item.id)"  class="uni-flex padding" style="justify-content: space-between;border-bottom: 1rpx solid #ccc;">
			<view class="goods-img" style="width: 220rpx;height: 280rpx;">
				<image style="width: 100%;height: 100%;" :src="weburl + item.photo" mode="widthFix"></image>
			</view>
			<view class="" style="width: calc(100% - 240rpx);">
				<view class="" style="text-align: right;font-weight: bold;"> 
					<span style="color: #e63564;font-size: 34rpx;">
						{{item.price}}
					</span> 
					积分兑换
				</view>
				<view class="" >
					<span style="text-align: right;font-weight: bold;">
					{{item.title}}
					</span> 
				</view>
				<view class="margin-tb-sm">
					{{item.short_title}}
				</view>
				<view class="" style="font-size: 20rpx;color: #999;text-align: right;">
					<!-- 共{{item.stock}}件，已兑换{{item.sales}}件 -->
				</view>
			</view>
		</view>
		
		<!-- <view class="" style="padding: 20rpx 40rpx; display: flex;flex-wrap: wrap;justify-content: space-between;">
			<view class="" v-for="i in 5" style="background-color: #fff;padding: 20rpx;margin-bottom: 16rpx; border-radius: 10rpx;width: 49%;">
				<view class="" style="display: flex;">
					<view class="">
						<view class="" style="font-weight: bold;">零食</view>
						<view class="" style="color: #999;">購物券</view>
					</view>
					<view class="" style="color: #f00;">
						<text style="font-size: 60rpx;">15</text>
						<text>元</text>
					</view>
				</view>
				
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="" style="color: #999;">2400積分</view>
					<view class="" style="background-color: aqua;color: #fff;font-size: 24rpx;padding: 0 10rpx;border-radius: 10rpx;">新人專享</view>
				</view>
			</view>
		</view> -->
		
		<!-- <view class="title_icon padding">
			<text class="text-lg">好物兑换</text>
			<v-tabs v-model="current" :line-color="lineColor" :active-color="lineColor" :tabs="tabs" @change="changeTab"></v-tabs>
		</view> -->
		<!-- <view class="cu-card padding-sm">
			<view class="cu-item sm-border" v-for="(item, index) in list" :key="index" @click="navToDetails(item)">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar lg" :style="'background-image: url('+weburl+item.photo+');'"></view>
						<view class="content">
							<view class="text-cut">{{ item.title }}</view>
							<view class="text-gray text-sm flex">
								<view class="text-red">{{ item.price }} {{ current ==1 ? '元' : '积分'  }}</view>
							</view>
						</view>
						<view class="action">
							<view class="text-xs cu-btn bg-red text-white round sm" style="width: 100%;">{{ current ==1 ? '购买' : '兑换'  }}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		<tabBar :currentPage="currentPage"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue';
	import vTabs from '@/components/v-tabs/v-tabs.vue';
	import YiChanMovableArea from '@/components/yichan-movable-area/yichan-movable-area.vue';
	
	export default {
		components: {
			tabBar,
			vTabs,
			YiChanMovableArea
		},
		data() {
			return {
				modalName: null,
				currentPage:'/pages/goods/index',
				loading: !1,
				loaded: !1,
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				userinfo:[],
				list: [],
				page: 1,
				lastPage: 0,
				loadMoreText: "加载中...",
				showLoadMore: true,
				current: 0,
				lineColor:"#ff410a",
				tabs: ['积分兑换', '现金购买'],
				avatar:'/static/icon_avatar.png',
			}
		},
		onUnload() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载中...",
			this.showLoadMore = true;
		},
		onLoad: function (option) {
			// this.loadBanners();
			this.getUserInfo();
			this.getData();
		},
		onReachBottom() {
			// console.log("onReachBottom");
			if (this.page >= this.lastPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				setTimeout(() => {
					this.getData();
				}, 300);
			}
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			setTimeout(() => {
				this.getData();
				this.getUserInfo();
			}, 300);
		},
		methods: {
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			changeTab(index) {
				  this.page =1;
				  this.lastPage = 0,
				  this.list = [],
				  this.loadMoreText = "加载中...",
				  setTimeout(() => {
				  	this.getData();
				  }, 300);
			},
			loadBanners: function() {
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=goods','timestamp='+timestamp]);
				this.helper.req({
					api:"getBanners",
					timestamp:timestamp,
					data:{type:'goods'},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					// console.log(res);
					this.carouselList = res.data.data.list;
					this.swiperLength = this.carouselList.length;
				})
			},
			getUserInfo:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				if(info.token){
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
					this.helper.req({
						api:"getUserInfo",
						timestamp:timestamp,
						data:{username:info.username,token:info.token},
						header:{sign:sign},
						method:'GET',
					}).then(res=>{
						this.userinfo = res.data.data.userinfo;
						if(this.userinfo.avatar){
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				}else{
					uni.hideLoading();
				}
			},
            getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				let page = this.page;
				let buy_type = parseInt(this.current+1);
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['page='+page,'buy_type='+buy_type,'timestamp='+timestamp]);
				this.helper.req({
					api:"getGoodsList",
					timestamp:timestamp,
					data:{page,buy_type},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					let current_page = res.data.data.list.current_page;
					let last_page = res.data.data.list.last_page;
					this.page = current_page + 1;
					this.lastPage = last_page;
					this.list = this.list.concat(res.data.data.list.data);
					if (this.page >= this.lastPage) {
						this.loadMoreText = "没有更多数据了!"
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
            },
			swiperChange: function(e) {
				var t = e.detail.current;
				this.swiperCurrent = t;
			},
			navToDetails: function(e) {
				return uni.navigateTo({
					url: "/pages/goods/detail?code=" + e.id
				});
			},
			onImageLoad: function(e, t) {
				this.$set(this[e][t], "loaded", "loaded")
			},
			onImageError: function(e, t) {
				this[e][t].icon = "/static/errorImage.jpg"
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.userinfo-box2{
		position: relative;
		color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.vip-box{
			position: absolute;
			left: 0;
			top: 40rpx;
			z-index: 99;
		}
		.vip-text{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center
		}
		.user-box{
			display: flex;
			align-items: center;
			position: absolute;
			justify-content: space-around;
			width: 100%;
			left: 0;
			top: 160rpx;
			z-index: 99;
			.avator{
				width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 50%;
			}
			.info{
				width: 360rpx;
			}
			.jifen{
				font-weight: bold;
			}
		}
		.tips-box{
			position: absolute;
			left: 0;
			top: 300rpx;
			z-index: 99;
			display: flex;
			width: 100%;
			padding: 20rpx 30rpx 0;
			justify-content: space-between;
			border-top: 10rpx solid #fff;
		}
	}
	.userinfo-box{
		padding: 20rpx;
		background-color: #0d78f7;
		color: #fff;
		.img-box{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #EEE
		}
		
		.tag{
			background-color: #74b7f4;
			padding: 0 10rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
			font-size: 24rpx;
		}
	}
	.vip-card-box {
		height: 260upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10;
		display: flex; /* 使用Flexbox布局 */
		justify-content: space-between; /* 在容器内平均分配空间，实现横向排列 */
	}
	.img-single {
		width: 100%;
		height: 165upx;
		margin: 0upx 0upx
	}
	.img-wrapper {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden
	}
	.img {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		z-index: 9;
		opacity: 1;
		width: 100%;
		height: 100%;
	}
	.user-info{
	  display: flex;
	  flex-direction: column;
	  align-items: center; /* 垂直居中文本内容 */
	}
	.cu-card{
		// border-top: solid 1px #e06c6a;
		display: flex;
		flex-wrap: wrap;
	}
	.cu-card > .cu-item{
		margin: 20upx;
	}
	.bg-blue{
		background-color: #0F51A0;
	}
	.cu-card > .cu-item{
		margin: 10upx;
	}
	.cu-avatar.lg {
	    width: 180upx;
	    height: 90upx;
	    background-color: #fff;
	}
	.cu-list.menu-avatar > .cu-item > .cu-avatar{
		left: 10upx;
	}
	.cu-list.menu-avatar > .cu-item .content{
		left: 210upx;
	}
	
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>
